<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
			  <h1>Hello App!</h1>
			  <p>
			    <!-- 使用 router-link 组件来导航. -->
			    <!-- 通过传入 `to` 属性指定链接. -->
			    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
			    <router-link to="/user/foo">Go to User</router-link>
			  </p>
			  <!-- 路由出口 -->
			  <!-- 路由匹配到的组件将渲染在这里 -->
			  <router-view></router-view>
		</div>
		<script src="https://unpkg.com/vue/dist/vue.js"></script>
		<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
		<script>
			   const User = {
				  template: `
				    <div class="user">
				      <h2>User {{ $route.params.id }}</h2>
				      <router-view></router-view>
				    </div>
				  `
			   }
			   //嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置
			   const router = new VueRouter({
				     routes: [
					    { 
						      path: '/user/:id',
						      component: User,
						      children: [
						        {
						          // 当 /user/:id/profile 匹配成功，
						          // UserProfile 会被渲染在 User 的 <router-view> 中
						          path: 'profile',
						          component: UserProfile
						        },
						        {
						          // 当 /user/:id/posts 匹配成功
						          // UserPosts 会被渲染在 User 的 <router-view> 中
						          path: 'posts',
						          component: UserPosts
						        }
						      ]
					    }
					  ]
				})
		</script>
	</body>
</html>
